import React, {Component} from 'react'
import {Table, Column, Cell} from 'fixed-data-table-2'
import { BaseDataTreeComponent } from '../../components'


class TextCell extends Component {
    render() {
        const {data, rowIndex, columnKey, ...props} = this.props;
        return (
            <Cell {...props}>
                {data[rowIndex][columnKey]}
            </Cell>
        );
    }
}

export default class ResizeExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dataList: [
                {
                    firstName: "123",
                    lastName: "123",
                    sentence: "123",
                    companyName: "123",
                }
            ],
            columnWidths: {
                firstName: 240,
                lastName: 150,
                sentence: 140,
                companyName: 60,
            },
        };

    }

    _onColumnResizeEndCallback = (newColumnWidth, columnKey) => {
        this.setState(({columnWidths}) => ({
            columnWidths: {
                ...columnWidths,
                [columnKey]: newColumnWidth,
            }
        }));
    };

    render() {
        var {dataList, columnWidths} = this.state;
        return (
            <div>
              <iframe style={{width:'100%',height:'20vh'}} src="http://192.168.1.6:8080/imes-web/materialInfo"></iframe>
              <BaseDataTreeComponent
                        url="basedatatree"
                        treeId = 'id'
                        treeName = 'name'
                        treeChildren = 'children'
                        checkable={true}
                        checkedKeys={['02','031','03','051']}
                    />
                    {/*<Table
                rowHeight={30}
                headerHeight={50}
                rowsCount={dataList.length}
                onColumnResizeEndCallback={this._onColumnResizeEndCallback}
                isColumnResizing={false}
                width={1000}
                height={500}
                {...this.props}>
                <Column
                    columnKey="firstName"
                    header={<Cell>First Name</Cell>}
                    cell={<TextCell data={dataList} />}
                    fixed={true}
                    width={columnWidths.firstName}
                    isResizable={true}
                />
                <Column
                    columnKey="lastName"
                    header={<Cell>Last Name (min/max constrained)</Cell>}
                    cell={<TextCell data={dataList} />}
                    width={columnWidths.lastName}
                    isResizable={true}
                    minWidth={70}
                    maxWidth={170}
                />
                <Column
                    columnKey="companyName"
                    header={<Cell>Company</Cell>}
                    cell={<TextCell data={dataList} />}
                    width={columnWidths.companyName}
                    isResizable={true}
                />
                <Column
                    columnKey="sentence"
                    header={<Cell>Sentence</Cell>}
                    cell={<TextCell data={dataList} />}
                    width={columnWidths.sentence}
                    isResizable={true}
                />
            </Table>*/}
            </div>
            
        );
    }
}
